layui.use(['layer','laypage'], function(){ 
   var laypage = layui.laypage,
    layer = layui.layer,
    $ = layui.$;

	//每一页的数据条数
	var limit = 4;
	var counts = 0;
	
	//初始化
	init();
	
	function init(){
		loadGood(1);
		showPage();
	}

	//绑定条件点击事件
	$(".li-item").click(function(){
		var key = $(this).attr('key');	//取房屋某个条件属性名
		var text = $(this).find('a').html();	//将选中的a标签赋值给text
		var val = $(this).find('a').attr('val');	//取到房屋条件值
		var isHave = $("#query-div").find("."+key);	//根据当前的条件属性名判断条件显示的DIV是否存在
		if(isHave.length){	//如果存在则将原有的a标签替换为现在选中的a标签
			isHave.attr("val",val);
			isHave.find('.item-text').html(text);
		}else{	//不存在的话往后面追加
			$("#query-div").append('<a style="margin-left:5px;margin-top: 15px;" key="'+key+'" val="'+val+'" href="javascript:;" class="layui-btn layui-btn-sm '+key+'""><span class="item-text">'+text+'</span><span class="item-close">X</span></a>');
		}
		init();	//选中条件时执行的查询方法
		//移除已选条件
		$("#query-div a").on('click',function(){
			$(this).remove();	//将点击的A标签移除掉
			init();//移除条件的执行方法
		});
	});
	
	//显示分页
	function showPage(){
	  laypage.render({
	    elem: 'pageLimit'	//分页标签显示的位置
		,count:counts	//总的记录条数
		,limit:limit	//每一页的数据条数
	    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']	//在页面中显示的样式
	  	,jump: function(obj, first){
	      if(!first){
	    	  loadGood(obj.curr);
	      }
	    }
	  });
	}
	
	//加载商品数据
	function loadGood(page){
		var jsonGood = getQueryParam();
		$.ajax({
			url: 'good/listByPramas?page='+page+'&limit='+limit,
			type: 'post',
			data:jsonGood,
			async: false,
			success:function(res){
					//循环数据集合，通过jquery的html()方法将标签加入到ul中
					var $html='';
					$.each(res.data,function(index,item){
						 $html += '<li class="col-sm-3"><div class="product"><div class="thumbnail">';
						 $html += '<a href="good/showGoodInfo?gid='+item.gid+'"><img src="/images/shop/goodHeader/'+item.gpicpath+'" style="width: 263px;height: 330px;" alt=""></a>';
						 $html += '<a href="#" class="add-to-cart" title="Add to Cart">';
						 $html += '<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-shopping-cart  fa-stack-1x fa-inverse"></i></span>';
						 $html += '</a></div><hr><div class="title">';
						 $html += '<h3 style="font-size: 15px;" id="showAllcss"><a href="#">'+item.gname+'</a></h3>';
						 $html += '<p>收藏-<span style="color: red;">'+item.collection+'</span>次';
						 $html += '&nbsp; &nbsp; &nbsp;  <span class="price" style="font-size: 22px;color: red;">$'+item.price+'</span></p></div></div></li>';
					});
					$('#showGoodIfyUl').html($html);
				    counts = res.count;
			},
			error:function(){
				layer.msg("服务器异常！",{"icon":3,"time":2000});
			}
		});
	}
	

	//获取筛选条件
	function getQueryParam(){
		var jsonGood = {};
		$("#query-div a").each(function(index,item){
			var key=$(item).attr('key')
			var val=$(item).attr('val')
			if(key=='tname'){
				jsonGood["goodType.tid"] = val;
			}else{
				jsonGood[key] = val ;
			}
		});
		return jsonGood;
	}
	
});